<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
    >
      <el-menu-item
          index="1"
          @click="activeIndex = '1'"
      >
        <RouterLink to="/experiment-home-a" active-class="select">A线</RouterLink>
      </el-menu-item>
      <el-menu-item
          index="2"
          @click="activeIndex = '2'"
      >
        <RouterLink to="/experiment-home-b" active-class="select">B线</RouterLink>
      </el-menu-item>
      <el-menu-item
          index="3"
          @click="activeIndex = '3'"
      >
        <RouterLink to="/experiment-home-c" active-class="select">C线</RouterLink>
      </el-menu-item>
      <el-menu-item
          index="4"
          @click="activeIndex = '4'"
      >
        <RouterLink to="/experiment-home-d" active-class="select">D线</RouterLink>
      </el-menu-item>
      <el-menu-item
          index="5"
          @click="activeIndex = '5'"
      >
        <RouterLink to="/experiment-info-table" active-class="select">实验数据查询</RouterLink>
      </el-menu-item>
    </el-menu>

    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 展示区 -->
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //
      activeIndex: '5'
    }
  }
}
</script>

<style scoped>
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-menu-demo {
}

/* 新增样式，使整个菜单项可点击 */
.el-menu-item:hover {
  cursor: pointer;
}
</style>
